<template>
    <el-upload v-model:file-list="fileList" :action="getbaseUrl" list-type="picture-card"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
        <img w-full class="img" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
  
<script  setup name="uImgs">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { baseUrl } from "@/utils/util"

let emit = defineEmits(["getUploadImgName"])

// 图片上传请求api
let getbaseUrl = baseUrl() + "/upload/album"
let apiImg = baseUrl()

const fileList = ref([
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleAvatarSuccess = (response, uploadFile) => {
    emit("getUploadImgName", response.data)
    // console.log(response, uploadFile, '图上传了')
}

const handleRemove = (uploadFile, uploadFiles) => {
    emit("getUploadImgName", uploadFile.response.data)
    // console.log(uploadFile.response.data, uploadFiles,"removeUpload")
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = apiImg + "/images/" + uploadFile.response.data
    dialogVisible.value = true
    // console.log(dialogImageUrl.value)
    // console.log(uploadFile.response.data, "uploadFile")
}

//   对外暴露清楚图片函数

const clearImgArr = () => {
    fileList.value = []
}

defineExpose({
    clearImgArr
})


</script>

<style lang="scss" scoped>
.img {
    width: 100%;
    height: 100%;
}
</style>